<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 100px;
        }

        .active {
            background-color: red;
            color: white;
        }
    </style>
</head>

<body>
    index

    <h2>分类列表</h2>
    <div class="cate-list">
        <!-- <a href="javascript:;">其他</a> -->
    </div>

    <ul>
        <!-- <li>
            <h2></h2>
            <img src="" alt="">
            <p></p>
        </li> -->
    </ul>


    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
    <script>
        /*
            1-商品列表
                打开页面-立刻调用列表接口
            2-分类列表

            3-分类的切换
            4- 列表进入详情页
                列表a标签中 使用 href属性  href='item.html?id=商品id'
                在item页面通过js 获取url中搜索参数 location.search
        
        */

        let baseURL = 'http://localhost:8888';
        let http = axios.create({
            baseURL,
            headers: {
                'content-type': 'application/x-www-form-urlencoded'
            }
        });


        // 记录 要显示的列表分类的内容
        let category = '';
        async function loadList() {
            // 接口地址--接口文档
            // 可以传入分类参数
            let productListAPI = '/goods/list';
            // 发起请求
            let r = await http.get(productListAPI, { params: { category } });
            console.log(r.data);
            // 遍历服务器返回的数据-生成列表
            let liStr = r.data.list.map(v => `
                <li>
                    <a href="17-item.html?id=${v.goods_id}">
                    <h2>${v.title}</h2>
                    <img src="${v.img_big_logo}" alt="">
                    <p>${v.current_price}</p>
                    </a>
                </li>
            `).join('');
            document.querySelector('ul').innerHTML = liStr

        }

        async function loadCateList() {
            // 发起分类列表请求
            let cateAPI = '/goods/category';
            let r = await http.get(cateAPI);
            console.log(r.data);

            // 根据返回的数据-拼接 需要的页面结构（）
            let aStr = r.data.list.map(v => `<a href="javascript:;">${v}</a>`).join(' ');

            aStr = '<a class="active" href="javascript:;">全部</a> ' + aStr;
            document.querySelector(".cate-list").innerHTML = aStr;
            // // 2---获取所有的分类按钮-添加点击事件

            // ***如果我们的页面内容是通过ajax 异步生成的-必须等请求成功，渲染页面以后，再去给元素添加事件
            // 2---获取所有的分类按钮-添加点击事件
            let aArr = document.querySelectorAll('.cate-list a');
            aArr.forEach(v => {
                v.onclick = function () {
                    console.log(v);
                    console.log(v.innerHTML);

                    //修改 分类内容
                    // 全部商品-分类是空字符串才可以
                    if (v.innerHTML == '全部') {
                        category = ''//
                    } else {
                        category = v.innerHTML

                    }
                    // 调用列表 重生列表
                    loadList()

                    // 实现选中切换效果
                    aArr.forEach(item => item.className = '')
                    v.className = 'active'
                }
            })
        }
        // 
        loadCateList()

        // 这里是获取不到--分类按钮
        // let aArr = document.querySelectorAll('.cate-list a');

        loadList()





    </script>

</body>

</html>